<template>
  <div class="main">
    <p class="main_text">拖车订单(公司)</p>
      <!-- 搜索 -->
      <div class="g-search">
        <!-- 信息区域 -->
        <div class="all_select" style="flex-wrap: wrap">
          <div class="input_valye" style="width: 100%">
            <span class="demonstration">操作时间:</span>
            <FormDate v-model:startTime="searchValue.startAt" v-model:endTime="searchValue.endAt" v-model:radio="radio">
              <span style="margin:0 10px">至</span>
            </FormDate>
          </div>
          <div class="input_valye">
            <span class="demonstration">拖单号:</span>
            <el-input v-model.trim="searchValue.orderSn" style="width: 200px" />
          </div>
          <!-- 店铺名称 -->
          <div class="input_valye">
            <span class="demonstration">拖车号牌:</span>
            <el-input v-model.trim="searchValue.trailerCarId" style="width: 200px" />
          </div>
          <div class="input_valye">
            <span class="demonstration">拖车司机:</span>
            <el-input v-model.trim="searchValue.driverName" style="width: 200px" />
          </div>
          <div class="bottom_btn">
            <el-button class="solid" @click="search">查询</el-button>
            <el-button class="hollow" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
    <!-- ############################################## 数据表格 ############################################## -->
    <div class="cyr-flex">
        <el-button @click="handleExportExcel" style="width: fit-content">导出明细</el-button>
      <el-table :data="tableData" class="mt20" show-summary :summary-method="getSummaries"
       :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column label="编号" type="index" width="80" />
        <el-table-column label="日期" prop="updatedAt"></el-table-column>
        <el-table-column label="托单号" prop="orderSn"></el-table-column>
        <el-table-column label="拖车号牌" prop="trailerCarId"></el-table-column>
        <el-table-column label="拖车司机" prop="driverName"></el-table-column>
        <el-table-column label="拖车金额" prop="driverIncome"></el-table-column>
        <el-table-column label="拖车扣款" prop="penaltyFee"></el-table-column>
        <el-table-column label="扣款原因" prop="penaltyReason"></el-table-column>
      </el-table>
      <!-- ############################################## 分页 ############################################## -->
      <smartPager v-model:current-page="page" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, h, VNode } from "vue";
import { ElMessage } from "element-plus";
import FormDate from '@/components/CyrForm/FormDate.vue';
import moment from "moment";
import { RequestDispatchTransferCompanyGetOrder, RequestExcelOutput } from '@/api/path/index'
import { formatTime, formatTimeHan } from '@/utils/index';
import { exportFile } from "@/utils/exportFile.js";
const page = ref(1);
const pageSize = ref(10)
const searchValue = ref({
  page: page.value,
  rows: 10,
  orderSn: '',
  driverName: "",
  orderStatus: "已完成",
  trailerCarId: '',
  startAt: '',
  endAt: ''
});
const radio = ref()
const tableData = ref<any[]>([])
const total = ref(0)
//初始化数据查询
const dataInit = (value: any) => {
  searchValue.value.page = page.value;
  searchValue.value.rows = pageSize.value;
  RequestDispatchTransferCompanyGetOrder(value).then(res => {
    tableData.value = res.resultObj.data
    total.value = res.resultObj.total
  })
}
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    page: 1,
    rows: 10,
    orderSn: '',
    driverName: "",
    orderStatus: "已完成",
    trailerCarId: '',
    startAt: '',
    endAt: ''
  };
  radio.value = '';
  page.value = 1;
  dataInit(searchValue.value);
};

/**
 * 搜索点击事件
 */
const search = () => {
  searchValue.value.page = 1;
  dataInit(searchValue.value);
};

const handleExportExcel = () => {
  RequestExcelOutput({
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出')
    } else {
      exportFile(res, `${formatTimeHan(new Date())}拖车结算`);
    }
  });
}


const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('span', [
        '合计',
      ])
      return
    }
    if (index === 5) {
      sums[index] = h('span', [
        `${data.reduce((prev, curr) => {
          const value = Number(curr[column.property])
          if (!Number.isNaN(value)) {
            return prev + value
          } else {
            return prev
          }
        }, 0)}`
      ])
      return
    }
    if (index === 6) {
      sums[index] = h('span', [
        `${data.reduce((prev, curr) => {
          const value = Number(curr[column.property])
          if (!Number.isNaN(value)) {
            return prev + value
          } else {
            return prev
          }
        }, 0)}`
      ])
      return
    }
    // const values = data.map((item) => Number(item[column.property]))
    // if (!values.every((value) => Number.isNaN(value))) {
    //   sums[index] = `${values.reduce((prev, curr) => {
    //     const value = Number(curr)
    //     if (!Number.isNaN(value)) {
    //       return prev + curr
    //     } else {
    //       return prev
    //     }
    //   }, 0)}`
    // } else {
    //   sums[index] = ''
    // }
  })
  return sums
}
const handleCurrentChange = (value) => {
  searchValue.value.page = value
  dataInit(searchValue.value)
}

dataInit(searchValue.value)
</script>
<style lang="scss" scoped>
@import "@/assets/css/plateform/Article/Content.css";
@import "@/assets/css/plateform/Shop/GoodsManage.css";

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .content {
    width: 100%;
    background-color: #fff;
  }

  .input_valye {
    margin: 10px 10px 0 0;
    display: flex;
    align-items: center;

    span {
      white-space: nowrap;
    }
  }

  .bottom_btn {
    margin-top: 0 !important;
  }
}
</style>